<template>
    <el-main style="padding:0px;" v-if="showContent">
        <!-- 头部两个按钮 -->
        <el-row v-show="showswitch">
            <el-col :span="4">
                <i
                    v-show="!readonly"
                    class="el-icon-plus m-p"
                    @click="handleOpenNewGroupDialog"
                >Add Group</i>&nbsp;
            </el-col>
            <el-col :span="10">&nbsp;</el-col>
            <el-col :span="5">&nbsp;</el-col>
            <el-col :span="5">
                <el-switch v-model="readonly" active-text="只读模式" inactive-text="编辑模式"></el-switch>
            </el-col>
        </el-row>

        <!-- 标签列表 -->
        <!-- 1: 优雅显示, 显示type;  -->
        <template v-if="displaymode=='1'">
            <el-row v-for="(tagtype,key) in tags" :key="key">
                <el-col :span="3" style="margin: 2px 0px;">
                    {{tagtype.typename}}<span v-show="!readonly" style="color:#C0C4CC;">({{tagtype.sortOrder}})</span>
                    <i
                        class="el-icon-edit m-p"
                        @click="handleOpenEditGroupDialog(tagtype.typeid, tagtype.typename, tagtype.sortOrder)"
                        v-show="!readonly"
                    ></i>
                    <i
                        class="el-icon-close m-p"
                        @click="handleDeleteTagGroup(tagtype.typeid)"
                        v-show="!readonly"
                    ></i>
                </el-col>
                <el-col :span="21">
                    <el-tag
                        size="small"
                        v-for="(option, key2) in tagtype.options"
                        :key="key2"
                        style="margin:2px 6px 2px 0px;"
                        class="m-p"
                        @click="readonly && handleSelectTag(option)"
                        :type="isTagChecked(option)? 'danger':'success'"
                    >
                        {{option.optionname}}<span v-show="!readonly" style="color:#C0C4CC;">({{option.sortOrder}})</span>
                        <i
                            class="el-icon-edit m-p"
                            style="margin-left:10px;"
                            @click="handleOpenEditOptionDialog(tagtype.typeid, option.optionid, option.optionname,option.sortOrder)"
                            v-show="!readonly"
                        ></i>
                        <i
                            class="el-icon-delete m-p"
                            style="margin-left:2px;"
                            @click="handleDeleteTagOption(option.optionid)"
                            v-show="!readonly"
                        ></i>
                    </el-tag>
                    <i
                        class="el-icon-plus m-p"
                        style="margin-left:30px;"
                        @click="handleOpenNewOptionDialog(tagtype.typeid)"
                        v-show="!readonly"
                    >Add Tag</i>
                </el-col>
            </el-row>
        </template>
        <!-- 2: 紧凑显示, 不显示type. -->
        <template v-if="displaymode=='2'">
            <el-row>
                <el-col :span="24">
                    <span v-for="(tagtype,key) in tags" :key="key">
                        <span v-show="!readonly"> {{tagtype.typename}} <span style="color:#C0C4CC;">({{tagtype.sortOrder}})</span></span>
                        <i
                            class="el-icon-edit m-p"
                            @click="handleOpenEditGroupDialog(tagtype.typeid, tagtype.typename, tagtype.sortOrder)"
                            v-show="!readonly"
                        ></i>
                        <i
                            class="el-icon-close m-p"
                            @click="handleDeleteTagGroup(tagtype.typeid)"
                            v-show="!readonly"
                        ></i>
                        <el-tag
                            size="small"
                            v-for="(option, key2) in tagtype.options"
                            :key="key2"
                            style="margin:2px 6px 2px 0px;"
                            class="m-p"
                            @click="readonly && handleSelectTag(option)"
                            :type="isTagChecked(option)? 'danger':'success'"
                        >
                            {{option.optionname}}<span v-show="!readonly" style="color:#C0C4CC;">({{option.sortOrder}})</span>
                            <i
                                class="el-icon-edit m-p"
                                style="margin-left:10px;"
                                @click="handleOpenEditOptionDialog(tagtype.typeid, option.optionid, option.optionname,option.sortOrder)"
                                v-show="!readonly"
                            ></i>
                            <i
                                class="el-icon-delete m-p"
                                style="margin-left:2px;"
                                @click="handleDeleteTagOption(option.optionid)"
                                v-show="!readonly"
                            ></i>
                        </el-tag>
                        <i
                            class="el-icon-plus m-p"
                            style="margin-left:30px;"
                            @click="handleOpenNewOptionDialog(tagtype.typeid)"
                            v-show="!readonly"
                        >Add Tag</i>
                    </span>
                </el-col>
            </el-row>
        </template>

        <!-- 标签组对话框 -->
        <el-dialog
            title="标签组"
            :visible.sync="isTypeInputVisible"
            v-if="isTypeInputVisible"
            width="40%"
            append-to-body
            :show-close="false"
        >
            <el-form ref="tagTypeForm" label-width="140px">
                <el-form-item label="Type ID" prop="inputTypeId">
                    <el-input v-model="inputTypeId" size="small" :disabled="true"></el-input>
                </el-form-item>

                <el-form-item label="Type Name" prop="inputTypeName">
                    <el-input v-model="inputTypeName" size="small"></el-input>
                </el-form-item>

                <el-form-item label="Sort Order" prop="inputTypeSortOrder">
                    <el-tooltip
                        class="item"
                        effect="dark"
                        content="建议类型按100跳, 具体标签按1跳,排序为101, 102,...."
                        placement="right"
                    >
                        <el-input v-model="inputTypeSortOrder" size="small"></el-input>
                    </el-tooltip>
                </el-form-item>

                <el-form-item>
                    <el-button @click="isTypeInputVisible=false">取 消</el-button>
                    <el-button type="primary" @click="handleTypeInputDialogConfirm">确 定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!-- 标签对话框 -->
        <el-dialog
            title="标签"
            :visible.sync="isTagInputVisible"
            v-if="isTagInputVisible"
            width="40%"
            append-to-body
            :show-close="false"
        >
            <el-form ref="tagOptionForm" label-width="140px">
                <el-form-item label="Tag ID" prop="inputOptionId">
                    <el-input v-model="inputOptionId" size="small" :disabled="true"></el-input>
                </el-form-item>

                <el-form-item label="Option Name" prop="inputOptionName">
                    <el-input v-model="inputOptionName" size="small"></el-input>
                </el-form-item>
                <el-form-item label="Sort Order" prop="inputOptionSortOrder">
                    <el-tooltip
                        class="item"
                        effect="dark"
                        content="建议类型按100跳, 具体标签按1跳,排序为101, 102,...."
                        placement="right"
                    >
                        <el-input v-model="inputOptionSortOrder" size="small"></el-input>
                    </el-tooltip>
                </el-form-item>

                <el-form-item>
                    <el-button @click="isTagInputVisible=false">取 消</el-button>
                    <el-button type="primary" @click="handleTagInputDialogConfirm">确 定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </el-main>
</template>






<script>
import Vue from "vue";

export default {
    data: function() {
        return {
            //所有定义的标签列表, 按照ID排序
            tags: [],
            isTypeInputVisible: false,
            isTagInputVisible: false,
            inputTypeName: "",
            inputOptionName: "",
            inputTypeId: "",
            inputOptionId: "",
            inputTypeSortOrder: 0,
            inputOptionSortOrder: 0,
            showContent: true,
            readonly: true
        };
    },
    props: {
        //选中的标签列表
        checkedtags: Array,
        //是否显示只读模式切换按钮, false不显示切换模式的按钮.
        showswitch: Boolean,
        //标签的排版模式.
        //1: 优雅显示, 显示type; 2: 紧凑显示, 不显示type.
        displaymode: String
    },
    mounted: function() {
        this.loadTags();
    },
    methods: {
        handleOpenNewGroupDialog() {
            this.isTypeInputVisible = true;
            this.inputTypeId = "";
            this.inputTypeName = "";
            this.inputTypeSortOrder = 0;
        },
        handleOpenEditGroupDialog(typeid, typename, sortOrder) {
            this.isTypeInputVisible = true;
            this.inputTypeId = typeid;
            this.inputTypeName = typename;
            this.inputTypeSortOrder = sortOrder;
        },
        handleTypeInputDialogConfirm() {
            if (this.inputTypeName === null || this.inputTypeName === "") {
                return;
            }
            this.$confirm(
                "Do you confirm to add new Tag Type?",
                "Please Double Confirm",
                {
                    type: "warning",
                    callback: (action, instance) => {
                        if (action === "confirm") {
                            let type = {
                                typeid: this.inputTypeId,
                                typename: this.inputTypeName,
                                sortOrder: this.inputTypeSortOrder,
                                options: []
                            };
                            Vue.axios({
                                method: `POST`,
                                url: `/api/admin/savetagtype`,
                                data: type
                            })
                                .then(response => {
                                    if (response.status === 200) {
                                        this.loadTags();
                                        return;
                                    }
                                    throw error;
                                })
                                .catch(error => {
                                    this.$router.push("/ui/login");
                                });
                        }
                        this.isTypeInputVisible = false;
                    }
                }
            );
        },
        handleOpenNewOptionDialog(typeid) {
            this.isTagInputVisible = true;
            this.inputTypeId = typeid;
            this.inputOptionId = "";
            this.inputOptionName = "";
            this.inputOptionSortOrder = 0;
        },
        handleOpenEditOptionDialog(typeid, optionid, optionname, sortOrder) {
            this.isTagInputVisible = true;
            this.inputTypeId = typeid;
            this.inputOptionId = optionid;
            this.inputOptionName = optionname;
            this.inputOptionSortOrder = sortOrder;
        },
        handleTagInputDialogConfirm() {
            if (this.inputOptionName === null || this.inputOptionName === "") {
                return;
            }
            this.$confirm(
                "Do you confirm to add new Tag Option?",
                "Please Double Confirm",
                {
                    type: "warning",
                    callback: (action, instance) => {
                        if (action === "confirm") {
                            let option = {
                                optionid: this.inputOptionId,
                                optionname: this.inputOptionName,
                                sortOrder: this.inputOptionSortOrder,
                                typeid: this.inputTypeId
                            };
                            Vue.axios({
                                method: `POST`,
                                url: `/api/admin/savetagoption`,
                                data: option
                            })
                                .then(response => {
                                    if (response.status === 200) {
                                        this.loadTags();
                                        return;
                                    }
                                    throw error;
                                })
                                .catch(error => {
                                    this.$router.push("/ui/login");
                                });
                        }
                        this.isTagInputVisible = false;
                    }
                }
            );
        },
        handleDeleteTagGroup(typeid) {
            this.$confirm(
                "Do you confirm to delete Tag Group?",
                "Please Double Confirm",
                {
                    type: "warning",
                    callback: (action, instance) => {
                        if (action === "confirm") {
                            Vue.axios({
                                method: `POST`,
                                url: `/api/admin/deletetagtype`,
                                data: { typeid: typeid }
                            })
                                .then(response => {
                                    if (response.status === 200) {
                                        this.loadTags();
                                        return;
                                    }
                                    throw error;
                                })
                                .catch(error => {
                                    this.$router.push("/ui/login");
                                });
                        }
                    }
                }
            );
        },
        handleDeleteTagOption(optionid) {
            this.$confirm(
                "Do you confirm to delete Tag Option?",
                "Please Double Confirm",
                {
                    type: "warning",
                    callback: (action, instance) => {
                        if (action === "confirm") {
                            Vue.axios({
                                method: `POST`,
                                url: `/api/admin/deletetagoption`,
                                data: { optionid: optionid }
                            })
                                .then(response => {
                                    if (response.status === 200) {
                                        this.loadTags();
                                        return;
                                    }
                                    throw error;
                                })
                                .catch(error => {
                                    this.$router.push("/ui/login");
                                });
                        }
                    }
                }
            );
        },
        loadTags() {
            this.showContent = false;
            Vue.axios({
                method: `POST`,
                url: `/api/admin/listtags`
            })
                .then(response => {
                    if (response.status === 200) {
                        this.tags = response.data;
                        //alert(this.tags)
                        //this.tags.splice(0, this.tags.length);
                        //response.data.forEach(t=>this.$set(this.tags, this.tags.length, t));
                        return;
                    }
                    throw error;
                })
                .catch(error => {
                    this.$router.push("/ui/login");
                })
                .finally(() => {
                    this.showContent = true;
                });
        },
        handleSelectTag(option) {
            let o = {
                optionid: option.optionid,
                optionname: option.optionname
            };
            if (this.isTagChecked(o)) {
                let idx = -1;
                this.checkedtags.forEach((t, i) => {
                    if (t.optionid == o.optionid) {
                        idx = i;
                    }
                });
                this.checkedtags.splice(idx, 1);
            } else {
                this.checkedtags.push(o);
            }
            //this.$emit("checkedtagsEvent", this.checkedtags);
        },
        isTagChecked(option) {
            let checked = false;
            this.checkedtags.every(t => {
                if (t.optionid == option.optionid) {
                    checked = true;
                    return false;
                }
                return true;
            });
            return checked;
        }
    }
};
</script>





<style scoped>
.m-p {
    cursor: pointer;
}
</style>
<style lang="stylus"></style>

